<template>
    <div class="list">
        <!-- 头部搜索 -->
        <Row>
            <Col :xs="24">
                <div class="margin-up-down">
                    <i-button type="info" @click="handleAdd"  style="width:51px;height:35px;">
                        <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
                    </i-button>
                </div>
              <div class="margin-up-down" v-if="!hideSearchForm">
                  <newfourLevelLinkage
                    :province="filterObj.provinceCode"
                    :city="filterObj.cityCode"
                    :area="filterObj.areaCode"
                    @changeProvince="changeProvince"
                    @changeCity="changeCity"
                    @changeArea="changeArea"
                    ref="newfourLevelLinkage"
                  ></newfourLevelLinkage>
                </div>
                <div class="margin-up-down" v-if="!hideSearchForm">
                  <Input v-model.trim="filterObj.searchKey" clearable style="width: 260px" placeholder="药企名称"/>
                </div>
                <div class="margin-up-down" v-if="!hideSearchForm">
                   <i-button type="primary" icon="ios-search" @click="handleSearch" style="font-size:14px;width:51px;height:35px;"></i-button>
                   <i-button @click="handleReset" style="width:51px;height:35px;">
                       <i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>
                    </i-button>
                </div>            
            </Col>
        </Row>
        <!-- 列表 -->
        <div class="table">
            <Table
                border
                size="small" 
                :columns="columns" 
                :data="data"
                :loading="loading"
                no-data-text="未查询到符合条件的记录"
                stripe>

            </Table>
             <div class="page">
                <Page :total="count" :current='filterObj.pageNo' :page-size="filterObj.pageSize" show-total show-elevator @on-change="changePage"/>
            </div>      
        </div>
        <!-- 删除确认弹窗 -->
        <Modal
            v-model="showDelConfirmModal"
            title="删除对照结果"
            class="drugmanagement-departmentdrug-list-delModal">
            <div class="content">
                <p class="tip">确定删除<span class="hospitalName">{{curRecord.orgName}}</span>的药品目录对照结果吗？</p>
                <p class="zhu">注：删除后此药企的所有药品对照关系将解除，需要重新建立。</p>
                <div slot="footer">
                    <div class="btn-group">
                        <Button class="left btn" type="primary" :loading="delBtnLoading" @click="handleDel">确认删除</Button>
                        <Button class="right btn" @click="showDelConfirmModal = false">取消</Button>
                    </div>
                </div>
            </div>
        </Modal>
        <!-- 编辑确认弹窗 -->
        <Modal
            v-model="showEditConfirmModal"
            title="重新对照"
            class="drugmanagement-departmentdrug-list-editModal">
            <div class="content">
                <p class="tip">确定重新对照<span class="hospitalName">{{curRecord.orgName}}</span>的药品目录对照结果吗？</p>
                <p class="zhu">注：重新对照会先删除之前的对照结果。</p>
                <div slot="footer">
                    <div class="btn-group">
                        <Button class="left btn" type="primary" :loading="delBtnLoading" @click="handleConfirmEdit">确认</Button>
                        <Button class="right btn" @click="showEditConfirmModal = false">取消</Button>
                    </div>
                </div>
            </div>
        </Modal>
    </div>
</template>

<script>
import cookie from "@/utils/cookie.js";
import api from "@/api/commonApi";
import newfourLevelLinkage from "@/components/newfourLevelLinkage";
const filterObj = {
    provinceCode: null,
    cityCode: null,
    areaCode: null,
    searchKey: null,
    pageNo: 1,
    pageSize: '10',
    hospitalType: 3
};
export default {
    components: {
        newfourLevelLinkage
    },
    data() {
        return {
        filterObj: this.deepClone(filterObj),
        count: 0,
        loading: false,
        delBtnLoading: false,
        columns: [
            {type: 'sum', title: '排序', width: 80, align: 'center',
                render: (h, params) => {
                    let sum = (this.filterObj.pageNo-1)*this.filterObj.pageSize + params.index +1;
                    return h("span", sum);
                }
            },
            { title: "药企名称", key: "orgName", align: "center"},
            { title: "地址", key: "hosAddr", align: "center"},
            { title: "联系电话", key: "linkmanTelephone", align: "center"},
            {
            title: "设置",
            key: "operate",
            width: 300,
            align: "center",
            render: (h, params) => {
                return h('div',[
                        h('sapn', {
                            props: {
                                type: 'primary',
                                size: 'small'
                            },
                            style: {
                                color: '#ff9966',
                                margin: "0px 6px"
                            },
                            on: {
                                click: () => {
                                    this.handleSynchro(params)
                                }
                            }
                        }, '药品目录同步到分店'),
                        '|', 
                        h('span', {
                            props: {
                                size: 'small'
                            },
                            style: {
                                color: '#5362e1',
                                margin: "0px 6px"
                            },
                            on: {
                                click: () => {
                                    this.handleEdit(params)
                                }
                            }
                        }, '修改'),
                        '|', 
                        h('span', {
                            props: {
                                type: 'primary',
                                size: 'small'
                            },
                            style: {
                                color: '#21c780',
                                margin: "0px 6px"
                            },
                            on: {
                                click: () => {
                                    this.handleReview(params)
                                }
                            }
                        }, '查看'),  
                        '|',                     
                        h('span', {
                            props: {
                                size: 'small'
                            },
                            style: {
                                color: '#fc6c49',
                                marginLeft: "6px"
                            },
                            on: {
                                click: () => {
                                    this.handleRemove(params)
                                }
                            }
                        }, '删除')
                ]);
            }
            },
        ],
        data: [],
        showDelConfirmModal: false,
        showEditConfirmModal: false,
        curRecord: {},
        hideSearchForm: false
        }
    },
    created() {
        let breadList = [
            { path: "/index", title: "首页" },
            { path: "", title: "药品目录管理" },
            {
                path: "/index/directory/pharmaceutical/list",
                title: "药企药品目录对照"
            }
        ];
        this.$emit("changeBreadList", breadList);

        // 权限控制筛选框是否展示
        this.identity = cookie.getCookie("idtt");
        this.hideSearchForm = this.identity == 5;
    },
    mounted() {
        this.findKbaoDrugCompanyDrugDtoPage();
    },
    methods: {
        //根据药企目录 同步药店药品目录
        handleSynchro(params) {
            this.$axios.post(api.synPharmacDrug, { hospitalId: params.row.id }).then(res => {
                this.loading = false;
                if (res.data.code === 1) {
                    this.$Message.success('同步成功');
                } else {
                    this.$Message.error(res.data.message);
                    return false;
                }
            }).catch(() => {
                this.loading = false;
            });
        },
        handleSearch() {
            this.filterObj.pageNo = 1;
            this.findKbaoDrugCompanyDrugDtoPage();
        },
        handleReset() {
            this.filterObj = this.deepClone(filterObj);
            this.findKbaoDrugCompanyDrugDtoPage();
        },
        handleAdd() {
            this.functionJS.queryNavgationTo(this, "/index/directory/pharmaceutical/add", {
            });
        },
        handleReview(record) {
            record = record.row;
            this.functionJS.queryNavgationTo(this, "/index/directory/pharmaceutical/review", {
                hospitalId: record.id,
                hospitalName: record.orgName,
                linkmanTelephone: record.linkmanTelephone,
                hosAddr: record.hosAddr,
            });
        },
        handleEdit(record) {
            this.curRecord = record.row;
            this.functionJS.queryNavgationTo(this, "/index/directory/pharmaceutical/edit", {
                hospitalId: this.curRecord.id,
                hospitalName: this.curRecord.orgName,
                linkmanTelephone: this.curRecord.linkmanTelephone,
                hosAddr: this.curRecord.hosAddr,
            });
        },
        handleConfirmEdit() {
            this.delDrugContrast('edit');
        },
        handleRemove(record) {
            this.curRecord = record.row;
            this.showDelConfirmModal = true;
        },
        handleDel() {
            this.delDrugContrast('del');
        },
        changePage(index) {
            this.filterObj.pageNo = index;
            this.findKbaoDrugCompanyDrugDtoPage();
        },
        changeProvince(val) {
            this.filterObj.provinceCode = val;
        },
        changeCity(val) {
            this.filterObj.cityCode = val;
        },
        changeArea(val) {
            this.filterObj.areaCode = val;
        },
        //药企药品对照列表
        findKbaoDrugCompanyDrugDtoPage() {
            this.loading = true;
            this.$axios.post(api.findDrugDtoPage, this.filterObj).then(res => {
                this.loading = false;
                if (res.data.code === 1) {
                    const ret = res.data.object.records;
                    this.data = ret || [];
                    this.count = res.data.object.total;
                } else {
                    this.$Message.error('请求异常');
                    return false;
                }
            }).catch(() => {
                this.loading = false;
            });
        },
        // 删除对照结果   信息对照之前也要走此流程
        delDrugContrast(type) {
            this.delBtnLoading = true;
            this.$axios.post(api.deleteDrugContrast, {hospitalid: this.curRecord.id}).then(res => {
                this.delBtnLoading = false;
                if (res.data.code === 1) {
                    if (type === 'del') {
                        this.$Message.success('删除成功');
                        this.showDelConfirmModal = false;
                    }
                    if (type === 'edit') {
                        this.functionJS.queryNavgationTo(this, "/index/directory/pharmaceutical/edit", {
                            hospitalId: this.curRecord.id,
                            hospitalName: this.curRecord.hospitalName,
                            linkmanTelephone: this.curRecord.linkmanTelephone,
                            hosAddr: this.curRecord.hosAddr,
                        });
                    }
                } else {
                    this.$Message.error({content: res.data.message, duration: 5});
                    return false;
                }
                this.findKbaoDrugCompanyDrugDtoPage();
            }).catch(() => {
                this.delBtnLoading = false;
            });
        },
        deepClone(obj) {
            return JSON.parse(JSON.stringify(obj))
        }
    },
    watch: {
        'filterObj.pageSize'(nv, ov) {
            this.filterObj.pageNo = 1;
            this.findKbaoDrugCompanyDrugDtoPage();
        },
    }
}
</script>

<style scoped lang="less">
.list {
    width: 100%;
    min-width: 1200px;
    padding: 10px;
    margin: 0 auto;
    background: #fff;
    .margin-up-down {
        display: inline-block;
        margin: 10px 0;
    }
    .page{
        text-align: center;
        margin: 20px 0;
    }
    header {
        width: 100%;
        position: relative;
        .filter-part {
            display: flex;
            flex-wrap: wrap;
            .filter-item {
                display: flex;
                margin: 10px 10px 10px 0;
                label {
                    white-space: nowrap;
                    line-height: 32px;
                    width: 100px;
                    text-align: right;
                }
                .input {
                    width: 220px;
                }
                .select {
                    width: 70px;
                }
            }
            .filter-btn-group {
                margin: 10px 10px 10px 0;
                flex: 0 0 auto;
            }
        }
        .fun-part {
            // margin-top: 15px;
            // margin-bottom: 10px;
            position: absolute;
            top: 10px;
            right: 0;
            a {
                vertical-align: bottom;
            }
        }
    }
    .table {
        .page-wrapper {
            display: flex;
            // margin-top: 20px;
            justify-content: space-between;
            .des {
                display: flex;
                align-items: center;
                .select {
                    width: 50px;
                }
            }
        }
    }
}
.drugmanagement-departmentdrug-list-delModal {
     /deep/ .ivu-modal-wrap {
        .ivu-modal-footer {
            display: none;
        }
        .btn-group {
            padding-top: 10px;
            text-align: center;
            .left {
                margin-right: 20px;
            }
            .right {
                margin-left: 20px;
            }
        }
        .content {
            text-align: center;
            .tip {
                padding-bottom: 10px;
                .hospitalName {
                    color: rgb(253, 120, 58);
                }
            }
        }
    }
}
.drugmanagement-departmentdrug-list-editModal {
    /deep/ .ivu-modal-wrap {
        .ivu-modal-footer {
            display: none;
        }
        .btn-group {
            padding-top: 10px;
            text-align: center;
            .left {
                margin-right: 20px;
            }
            .right {
                margin-left: 20px;
            }
        }
        .content {
            text-align: center;
            .tip {
                padding-bottom: 10px;
                .hospitalName {
                    color: rgb(253, 120, 58);
                }
            }
        }
    }
}
</style>